<template>
  <el-dialog v-model="model" @close="closedDialog">
    <el-form ref="dictTypeFormRef" :model="form" label-width="120px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('dictType.typeCode')" prop="typeCode">
            <el-input v-model="form.typeCode" :placeholder="$t('dictType.typeCodeRequired')" maxlength="30" show-word-limit
              clearable :readonly="update" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('dictType.entryType')" prop="entryType">
            <jmash-enum-select v-model="form.entryType" :placeholder="$t('dictType.entryTypeRequired')"
              :enum-type="Constant.ENUM_ENTRY_TYPES" :module="Constant.MODULE_DICT" :disabled="update" class="w-full" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('dictType.typeName')" prop="typeName">
            <el-input v-model="form.typeName" :placeholder="$t('dictType.typeNameRequired')" maxlength="60" show-word-limit
              clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('dictType.enable')" prop="enable">
            <el-switch v-model="form.enable" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('dictType.isOpen')" prop="isOpen">
            <el-switch v-model="form.isOpen" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('dictType.description')" prop="description">
            <el-input v-model="form.description" :placeholder="$t('dictType.descriptionRequired')" maxlength="120"
              show-word-limit clearable :rows="3" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closedDialog">{{ $t("common.cancel") }}</el-button>
        <el-button type="primary" @click="submitForm">
          {{ $t("common.confirm") }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, type PropType } from "vue";
import { type FormInstance, type FormRules, ElMessage } from "element-plus";

import { useI18n } from "vue-i18n";
const { t } = useI18n();

import type {
  DictTypeKey,
  DictTypeFormReq,
  DictTypeCreateReq,
  DictTypeUpdateReq,
} from "@/api/dict/os-dict-type/types";
import { dictTypeApi } from "@/api/dict/os-dict-type/index";
import { Constant } from "@/constant";

const dictTypeFormRef = ref<FormInstance>();

let form: DictTypeFormReq = reactive<DictTypeFormReq>({
  requestId: Math.random() * 10 + "",
  updateMask: "typeName,description,enable,isOpen",
  enable: true,
});
const rules = reactive<FormRules<DictTypeFormReq>>({
  typeCode: [
    {
      required: true,
      message: t("dictType.typeCodeRequired"),
      trigger: "change",
    },
  ],
  typeName: [
    {
      required: true,
      message: t("dictType.typeNameRequired"),
      trigger: "change",
    },
  ],
  entryType: [
    {
      required: true,
      message: t("dictType.entryTypeRequired"),
      trigger: "change",
    },
  ],
});

const model = defineModel<boolean>();


const props = defineProps({
  entityKey: {
    type: Object as PropType<DictTypeKey>,
    default: () => { },
  },
});

const emits = defineEmits(["refresh"]);


const keys = Object.keys(props.entityKey);
const update = ref(keys.length >= 1);
if (update.value) {
  dictTypeApi.findById(props.entityKey).then(({ data }) => {
    Object.assign(form, data);
  });
}

// 提交表单校验
const submitForm = async () => {
  await dictTypeFormRef.value?.validate((valid) => {
    if (valid) {
      if (update.value) {
        dictTypeApi.update(form as DictTypeUpdateReq).then((response) => {
          console.log(response);
          if (response.status === 200) {
            ElMessage({
              message: t("common.submitSuccess"),
              type: "success",
            });
            if (model.value) {
              model.value = false;
            }
            emits("refresh", response.status === 200);
          }
        });
      } else {
        dictTypeApi.create(form as DictTypeCreateReq).then((response) => {
          console.log(response);
          if (response.status === 200) {
            ElMessage({
              message: t("common.submitSuccess"),
              type: "success",
            });
            if (model.value) {
              model.value = false;
            }
            emits("refresh", response.status === 200);
          }
        });
      }
    }
  });
};

// 关闭弹框
function closedDialog() {
  if (model.value) {
    model.value = false;
  }
}
</script>
<style scoped lang="scss">
.w-full {
  width: 100% !important;
}
</style>
